<!DOCTYPE html>
<html lang="en">
<head>
     <style>
    .table-container {
      text-align: center;
    }
    table {
      margin-left: auto;
      margin-right: auto;
    }
  </style>
    <meta charset="UTF-8">
    <title>北邮教师信息查询系统</title>
</head>
<body>
     <div style="text-align: center;">
      <h1>北邮教师信息查询(按姓名)</h1>
     </div>
<div style="float: none; margin-left: auto; margin-right: auto;width: 250px;">
    <form method="GET">
    <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="请输入...">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit">查询</button>
        </span>
    </div><!-- /input-group -->
    </form>
    <br>
    <style>
  .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
  }
  .container {
    text-align: center;
  }
</style>
    <div class="container">
    <a href="http://127.0.0.1:8000/begin/" class="btn">返回</a>
    </div>
        <br>

    <div class="table-container">
<table border="1">
    <thead>
      <tr>
          <th>ID</th>
          <th style="width: 500px;">专业</th>
          <th style="width: 500px;">姓名</th>
          <th style="width: 500px;">职称</th>
          <th style="width: 500px;">头像</th>
      </tr>
    </thead>
    <tbody>
    {% for obj in data_list %}
      <tr>
          <td>{{obj.id}}</td>
          <td>{{obj.department}}</td>
          <td>{{obj.name}}</td>
          <td>{{obj.title}}</td>
          <td style="width: 100px;"><img src="{{obj.photo}}" alt="wrong" style="width: 100%; height: auto;"></td>
      </tr>
    {% endfor %}
    </tbody>
</table>
    </div>
</div>
</body>
</html>